
sr-rd-crlbar {
    z-index: 2100000000;
    transition: opacity 450ms 0ms;
}

sr-rd-crlbar fab {
    display: block;

    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

sr-rd-crlbar fab.crlbar-close {
    position: fixed;
    bottom: 45px;
    right: 12px;

    width: 56px;
    height: 56px;
    line-height: 56px;

    background-color: rgba(244, 67, 54, 1);
    background-image: url();

    transform: rotate(0deg);
    transition: all 450ms 0ms;
}

sr-rd-crlbar fab.crlbar-close:hover {
    transform: rotate(45deg);
    transition: all 450ms 0ms;
}

sr-rd-crlbar fab.anchor {
    position: fixed;
    right: 20px;
    bottom: 100px;
    background-color: rgba(245, 82, 70, .8);
    background-image: url();
}

sr-rd-crlbar fab.anchor,
sr-rd-crlbar fab.pocket,
sr-rd-crlbar fab.evernote,
sr-rd-crlbar fab.yinxiang,
sr-rd-crlbar fab.dropbox,
sr-rd-crlbar fab.markdown,
sr-rd-crlbar fab.drafts,
sr-rd-crlbar fab.bear {
    margin-bottom: 10px;

    width: 40px;
    height: 40px;
    line-height: 40px;

    transition: opacity .5s ease;
}

sr-rd-crlbar fab.pocket,
sr-rd-crlbar fab.evernote,
sr-rd-crlbar fab.yinxiang,
sr-rd-crlbar fab.dropbox {
    background-color: #9E9E9E;
}

sr-crlbar-group {
    position: fixed;

    display: flex;
    flex-direction: column;

    right: 20px;
    bottom: 150px;

    opacity: 0;
    transition: opacity .5s ease;
}

sr-rd-crlbar fab.pocket {
    background-image: url();
}

sr-rd-crlbar fab.evernote {
    background-image: url();
}

sr-rd-crlbar fab.yinxiang {
    background-image: url();
}

sr-rd-crlbar fab.dropbox {
    background-image: url();
}

sr-rd-crlbar fab.markdown {
    opacity: 0;
    background-color: rgba(245, 82, 70, 1);
    background-image: url();
}

sr-rd-crlbar fab.bear {
    opacity: 0;
    background-image: url();
}

sr-rd-crlbar fab.drafts {
    opacity: 0;
    background-image: url();
}